<!DOCTYPE html>
<html lang="en">
  <head>
    <title>p2.js Canvas mousejoint example</title>
    <meta charset="utf-8">
    <script src="../../build/p2.js"></script>
  </head>
  <body>

    <!-- The canvas, where we draw stuff -->
    <canvas width="600" height="400" id="myCanvas"></canvas>

    <script>
      var canvas, ctx, w, h, world, boxBody, planeBody, mouseConstraint, mouseBody;
      var scaleX = 50, scaleY = -50;

      init();
      requestAnimationFrame(animate);

      function init(){

        // Init canvas
        canvas = document.getElementById("myCanvas");
        w = canvas.width;
        h = canvas.height;

        ctx = canvas.getContext("2d");
        ctx.lineWidth = 0.05;

        // Init p2.js
        world = new p2.World();

        // Add a box
        boxShape = new p2.Box({ width: 2, height: 1 });
        boxBody = new p2.Body({
          mass:1,
          position:[0,3],
          angularVelocity:1
        });
        boxBody.addShape(boxShape);
        world.addBody(boxBody);

        // Add a plane
        planeShape = new p2.Plane();
        planeBody = new p2.Body();
        planeBody.addShape(planeShape);
        world.addBody(planeBody);

        // Create a body for the cursor
        mouseBody = new p2.Body();
        world.addBody(mouseBody);

        canvas.addEventListener('mousedown', function(event){

          // Convert the canvas coordinate to physics coordinates
          var position = getPhysicsCoord(event);

          // Check if the cursor is inside the box
          var hitBodies = world.hitTest(position, [boxBody]);

          if(hitBodies.length){

            // Move the mouse body to the cursor position
            mouseBody.position[0] = position[0];
            mouseBody.position[1] = position[1];

            // Create a RevoluteConstraint.
            // This constraint lets the bodies rotate around a common point
            mouseConstraint = new p2.RevoluteConstraint(mouseBody, boxBody, {
              worldPivot: position,
              collideConnected:false
            });
            world.addConstraint(mouseConstraint);
          }
        });

        // Sync the mouse body to be at the cursor position
        canvas.addEventListener('mousemove', function(event){
          var position = getPhysicsCoord(event);
          mouseBody.position[0] = position[0];
          mouseBody.position[1] = position[1];
        });

        // Remove the mouse constraint on mouse up
        canvas.addEventListener('mouseup', function(event){
          world.removeConstraint(mouseConstraint);
          mouseConstraint = null;
        });
      }

      // Convert a canvas coordiante to physics coordinate
      function getPhysicsCoord(mouseEvent){
          var rect = canvas.getBoundingClientRect();
          var x = mouseEvent.clientX - rect.left;
          var y = mouseEvent.clientY - rect.top;

          x = (x - w / 2) / scaleX;
          y = (y - h / 2) / scaleY;

          return [x, y];
      }

      function drawbox(){
        ctx.beginPath();
        var x = boxBody.interpolatedPosition[0],
            y = boxBody.interpolatedPosition[1];
        ctx.save();
        ctx.translate(x, y);        // Translate to the center of the box
        ctx.rotate(boxBody.interpolatedAngle);  // Rotate to the box body frame
        ctx.rect(-boxShape.width/2, -boxShape.height/2, boxShape.width, boxShape.height);
        ctx.stroke();
        ctx.restore();
      }

      function drawPlane(){
        var y = planeBody.interpolatedPosition[1];
        ctx.moveTo(-w, y);
        ctx.lineTo( w, y);
        ctx.stroke();
      }

      function render(){
        // Clear the canvas
        ctx.clearRect(0,0,w,h);

        // Transform the canvas
        ctx.save();
        ctx.translate(w/2, h/2); // Translate to the center
        ctx.scale(scaleX, scaleY);

        // Draw all bodies
        drawbox();
        drawPlane();

        // Restore transform
        ctx.restore();
      }

      var lastTime, timeStep = 1 / 60, maxSubSteps = 5;

      // Animation loop
      function animate(time){
        requestAnimationFrame(animate);

        var dt = lastTime ? (time - lastTime) / 1000 : 0;
        dt = Math.min(1 / 10, dt);
        lastTime = time;

        // Move physics bodies forward in time
        world.step(timeStep, dt, maxSubSteps);

        // Render scene
        render();
      }

   </script>

  </body>
</html>
